<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>收货人：</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请填写收货人姓名' v-model="name"></input>
					</view>
				</view>
				<view class='cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机号码：</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请填写收货人手机号' v-model="mobile"></input>
					</view>
				</view>
				
				<view class='cell-item-mid right-img'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>省市地区：</view>
					</view>
					<view class='cell-item-bd'>
						<input :value="pickerValue" @focus="showThreePicker"></input>
						<area-picker ref="areaPicker" :areaId="areaId" :defaultIndex="defaultIndex" @onConfirm="onConfirm" class="area-picker-s"></area-picker>
					</view>
					
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png' @click="showThreePicker"></image>
					</view>
				</view>
				
				<view class='cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>详细地址：</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请填写收货详细地址' v-model="address"></input>
					</view>
				</view>
			</view>
			<view class='cell-items'>
				<view class="label-home">
					<view class="label-text">标签:</view>
					<view class="text_">
						<view>家</view>
						<view>公司</view>
					</view>
				</view>
				<view class='cell-item-hds' @click="defaultChange">
					<view class='cell-hd-title'>设为默认</view>
					<view class='cell-item-ft' >
						  <switch checked @change="switch1Change" color="#ff5e4d"/>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			
			<!-- <button class="btn btn-square btn-w" @click="delShip" v-if="id && id != 0" hover-class="btn-hover2" :disabled='submitStatus' :loading='submitStatus'>删除</button> -->
			
			<button class="btn" @click="saveShip" :disabled='submitStatus' :loading='submitStatus'>完成</button>
			
		</view>
	</view>

</template>

<script>
import areaPicker from "@/components/area-picker/areaPicker.vue";
export default {
	components: {
		areaPicker
	},
	data() {
		return {
			id: 0,
			name: '',
			mobile: '',
			region: ['点击选中','',''],
			areaId: 110101,
			address: '',
			is_def: 2,
			multiArray: [
				[],
				[],
				[]
			],
			multiIndex: [110000, 110100, 110101],
			checked: false,
			pickerValue: '',
			defaultIndex: [0, 0, 0],
			submitStatus: false
		}
	},
	computed: {},
	methods: {
		// 省市区联动初始化
		showThreePicker() {
			this.$refs.areaPicker.showPicker();
		},
		onConfirm(e) {
			let province_name = e[0].name;
			let city_name = e[1].name;
			let county_name = e[2].name;
			this.pickerValue = e[0].name+ " "+ e[1].name+" "+e[2].name
			let data = {
				province_name: province_name,
				city_name: city_name,
				county_name: county_name
			}
			let regionName = [province_name, city_name, county_name];
			this.$api.getAreaId(data, res => {
				if (res.status) {
					this.areaId = res.data
				} else {
					uni.showModal({
						title: '提示',
						content: '地区选择出现问题，请重新选择地区',
						showCancel: false
					});
				}
			});
		},
		// 信息验证
		checkData (data) {
			this.submitStatus = false;
			if (!data.name) {
				this.$common.errorToShow('请输入收货人姓名')
				return false
			} else if (!data.mobile) {
				this.$common.errorToShow('请输入收货人手机号')
				return false
			} else if (data.mobile.length !== 11) {
				this.$common.errorToShow('收货人手机号格式不正确')
				return false
			} else if (!data.area_id) {
				this.$common.errorToShow('请选择地区信息')
				return false
			} else if (!data.address) {
				this.$common.errorToShow('请输入收货地址详细信息')
				return false
			} else {
				return true
			}
		},
		//默认
		defaultChange(){
			if(this.checked){
				this.checked = false;
				this.is_def = 2;
			}else{
				this.checked = true;
				this.is_def = 1;
			}
		},
		//编辑获取收货地址信息
		getShipInfo() {
			let data = {
				'id': this.id
			}
			this.$api.shipDetail(data, res => {
				if(res.status){
					let region = res.data.area_name.split(" ");
					this.name = res.data.name;
					this.mobile = res.data.mobile;
					this.region = region;
					this.areaId = res.data.area_id;
					
					this.pickerValue = this.region[0]+ " "+ this.region[1]+" "+this.region[2]
					this.$refs.areaPicker.init();//初始化插件
					
					this.address = res.data.address;
					this.is_def = res.data.is_def;
					if(res.data.is_def == 1){
						this.checked = true;
					}else{
						this.checked = false;
					}
				}else{
					this.$common.errorToShow('获取收货地址信息出现问题');
					// this.submitStatus = false;
				}
			},res => {
				this.submitStatus = false;
			});
		},
		//删除地址
		delShip() {
			this.submitStatus = true;
			this.$api.removeShip({'id': this.id}, res => {
				if(res.status){
					this.$common.successToShow(res.msg, ress => {
						// this.submitStatus = false;
						uni.navigateBack({
							delta: 1
						});
					});
				}else{
					this.$common.errorToShow(res.msg);
					// this.submitStatus = false;
				}
			},res => {
				this.submitStatus = false;
			});
		},
		//存储收货地址
		saveShip() {
			this.submitStatus = true;
			let data = {
				name: this.name,
				address: this.address,
				mobile: this.mobile,
				is_def: this.is_def,
				area_id: this.areaId
			}
			
			if(this.id && this.id != 0){
				//编辑存储
				data.id = this.id
				
				if (this.checkData(data)) {
					this.$api.editShip(data, res => {
						if(res.status){
							this.$common.successToShow(res.msg, ress => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							});
						}else{
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}else{
				//添加
				if (this.checkData(data)) {
					this.$api.saveUserShip(data, res => {
						if(res.status){
							this.$common.successToShow(res.msg, ress => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							});
						}else{
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					},res => {
						this.submitStatus = false;
					});
				}
			}
		}
	},
	onLoad(e) {
		if(e.ship_id){
			//编辑
			this.id = e.ship_id;
			this.getShipInfo();
		}else{
			//添加
			this.pickerValue = this.region[0]+ " "+ this.region[1]+" "+this.region[2];
			uni.setNavigationBarTitle({
				title: '添加地址'
			});
		}
	},
	onBackPress() {
		if (this.$refs.areaPicker.pickerShow) {
			this.$refs.areaPicker.closePicker();
			return true;
		}
	},

}
</script>

<style lang="less">
	.button-bottom {
		width:686rpx;
		height:72rpx;
		font-weight:500;
		position:fixed;
		left:32rpx;
		right:32rpx;
		bottom:64rpx;
		border-radius:34rpx;
		button {
			background:rgba(255,94,77,1);
			border-radius:34rpx;
			font-size:28rpx;
			color:rgba(255,255,255,1);
			font-family:PingFangSC-Medium,PingFang SC;
		}
	}
	.cell-item-bd input {
		font-size:26rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(179,179,179,1);
	}
	.uni-input-input {
		font-size:26rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(179,179,179,1);
	}
	.cell-group {
		margin:32rpx auto 0 auto;
		width:686rpx;
		max-height:406px;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		.cell-item-mid {
			padding:24rpx 0 24rpx 32rpx;
			display:flex;
			.cell-item-mid {
			}
		}
	}
.cell-items {
	width:686rpx;
	height:210rpx;
	margin:24rpx auto 0 auto;
	background:rgba(255,255,255,1);
	border-radius:16rpx;
	.cell-item-hds {
		width:100%;
		display:flex;
		justify-content: space-between;
		padding:32rpx;
	}
	.label-home {
		padding:32rpx;
		border-bottom:1px solid  rgba(245,245,245,1);
		display:flex;
		justify-content: space-between;
		.label-text {
			font-size:28rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.text_ {
			display:flex;
			view {
				border-radius:32rpx;
				line-height:32rpx;
				padding:0 32rpx;
				margin-left:16rpx;
				height:42rpx;
				border:2rpx solid rgba(230,230,230,1);
			}
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
		
		}
	}
}
.user-head{
	height: 100upx;
}
.user-head-img{
	height: 90upx;
	width: 90upx;
	border-radius: 50%;
}

.cell-bd-input{
	width: 100%;
	font-size:28rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.right-img .cell-item-ft{
	right: 26rpx;
}
/* #ifdef MP-ALIPAY */
input{
	font-size: 24upx;
}
/* #endif */
</style>